@import "@/assets/css/common.scss";
.dayrecommd {
  .top-nav {
    background: no-repeat center center / cover !important;
  }
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 1;
  @include background_color("cell-bgcolor");
  @include font_color("text-color");
  .cell-box {
    @include background_color("cell-bgcolor");
  }
  &-info {
    height: 5rem;
    background: linear-gradient(to bottom, #e04540, #ed9085);
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    &-box {
      position: relative;
      height: 100%;
      width: 100%;
      color: #fff;
    }
    &-data {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      // transition: opacity 0.3s ease-in-out;
      &-date {
        padding: 0.25rem 0.35rem;
        .day {
          font-size: 0.8rem;
          display: inline-block;
          transform: scaleY(1.1);
        }
        .date-division {
          font-size: 0.36rem;
          padding-left: 0.1rem;
        }
        .month {
          font-size: 0.36rem;
          display: inline-block;
          transform: scaleY(1.1);
          padding-left: 0.1rem;
        }
      }
      &-history {
        padding: 0.1rem 0.25rem;
        font-size: 0.36rem;
        background-color: #f09b93;
        border-radius: 999rem;
        display: flex;
        align-items: center;
        img {
          width: 1.2rem;
          height: auto;
          margin-left: 0.1rem;
        }
      }
    }
  }
  &-playall {
    margin-top: 4rem;
    position: sticky;
    top: 1rem;
    z-index: 1;
    &-text {
      font-size: 0.42rem;
      font-weight: 600;
      margin-left: 0.2rem;
    }
    &-num {
      font-size: 0.25rem;
      font-weight: 600;
      color: #909399;
    }
    .mh-select {
      color: #000;
      font-size: 0.6rem !important;
      font-weight: 600;
    }
  }
  &-music {
    &-music {
      flex: 1;
      display: flex;
      &-cover {
        width: 1rem;
        height: 1rem;
        margin: 0 0.15rem;
        border-radius: 0.15rem;
      }
      &-name {
        font-size: 0.4rem;
        line-height: 0.5rem;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-all;
      }
      &-author {
        font-size: 0.32rem;
        color: #909399;
        margin-top: 0.1rem;
        line-height: 0.35rem;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      &-video {
        margin-right: 0.45rem;
        font-size: 0.5rem !important;
      }
      &-more {
        font-size: 0.45rem !important;
        margin-right: 0.1rem;
      }
    }
  }
}
